<template>
	<view class="addfrieds">
		<view style="background: #000000;height: 100%;">
			<uni-search-bar 
			radius="5" 
			placeholder="输入好友昵称或者手机号即可搜索" 
			clearButton="always" 
			cancelButton="always" 
			@confirm="searchUser" />
		</view>
		<view class="words">
			<text>查询结果</text>
			<image src="../../../static/icon/arrow.png" mode=""></image>
		</view>
<!-- 		<uni-list v-for="item in list" class="search_result">
			<uni-list-item :item="item.id" :show-arrow="false" title="item.name" note="item.description" thumb="item.head">
				<template v-slot:right="">
					<image v-if="item.isFollow" src="../../../static/icon/add.png" @click.native="cancelFollow(item.id)"></image>
					<image v-else src="../../../static/icon/have_concern.png"
							style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem" @click.native="addFollow(item.id)"></image>
				</template>
			</uni-list-item>
		</uni-list> -->
		
		
		<div class="search_result">
		    <li v-for="item in list" :item="item.id">
		      <div class="person">
		        <!-- <img :src="item.head" onerror="this.src='../../../static/icon/default/head_not_found.jpg'"> -->
				<dh-image :src="item.head" errorSrc="../../../static/icon/default/head_not_found.jpg"></dh-image>
		        <div class="info">
		          <p>{{item.name}}</p>
		          <span>{{item.description}}</span>
		        </div>
		
		        <!-- <mt-button v-if="item.isFollow" @click.native="cancelFollow(item.id)">
		          <img src="../../static/img/have_concern.png"
		               style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem" slot="icon">
		        </mt-button>
		        <mt-button v-else @click.native="addFollow(item.id)">
		          <img src="../../static/img/add.png" style="width: 2rem;height: 2rem;margin-top: 0.7rem"
		               slot="icon">
		        </mt-button> -->
				<image
					v-if="item.isFollow"
					src="../../../static/icon/have_concern.png"
					style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem"
					@click="cancelFollow(item.id)"></image>
				<image
					v-else
					src="../../../static/icon/add.png"
					style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem"
					@click="addFollow(item.id)"></image>
		      </div>
		    </li>
		
		    <li v-for="item in contractList" :item="item.id" v-if="list.length<=0">
		      <div class="person" v-if="item.isRegister==1">
		<!--        <img :src="item.head" onerror="this.src='../../static/img/default/head_not_found.jpg'">-->
		        <div class="info">
		          <p>{{item.name}}</p>
		          <span>({{item.phoneNumber}})</span>
		        </div>
		
		        <!-- <mt-button v-if="item.isFollow" @click.native="cancelFollow(item.cuid)">
		          <img src="../../static/img/have_concern.png"
		               style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem" slot="icon">
		        </mt-button>
		        <mt-button v-else @click.native="addFollow(item.cuid)">
		          <img src="../../static/img/add.png" style="width: 2rem;height: 2rem;margin-top: 0.7rem"
		               slot="icon">
		        </mt-button> -->
				
				<image
					v-if="item.isFollow"
					src="../../../static/icon/have_concern.png"
					style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem"
					@click.native="cancelFollow(item.cuid)"></image>
				<image
					v-else
					src="../../../static/icon/add.png"
					style="width: 1.8rem;height: 1.8rem;margin-top: 0.5rem"
					@click.native="addFollow(item.cuid)"></image>
		      </div>
		    </li>
		
		  </div>
		
		
	</view>
</template>
<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import dhImage from '@/components/dh-image/dh-image'
	import {
		SEARCH_USER_BY_ID,
		ADD_FOLLOW,
		CANCEL_FOLLOW,
		ADD_CONTRACT,
		GET_CONTRACT,
	} from '@/store/mutation-types.js'
	
	export default {
		comments: {
			uniSearchBar,
			uniList,
			uniListItem,
			dhImage
		},
		data() {
			return {
				value: null,
				user: {},
				list: [],
				contractList:[],
			}
		},
		mounted(){
			this.user = function () {
				var localuser = localStorage.getItem("user");
				if (localuser && localuser != null && typeof (localuser) != undefined) {
					return JSON.parse(localuser);
				} else {
					this.jumpToLogin();
				}
			},
			this.contract_test();
		},
		methods: {
			searchUser(res) {
				let app = this;
			    let success = function (result) {
					// console.log(result);
			        if (result.error == "0") {
						console.log("success");
			            app.list = result.data.list;
			        } else {
			            app.$toast(result.error);
						console.log("error");
			        }
			    };
				let data = {
					name:res.value
				}
				console.log(app.list)
			    app.$store.dispatch(`user/${SEARCH_USER_BY_ID}`,{
			    	data,
			    	onSuccess:success
			    })
			},
			addFollow(id) {
			    let data = {
			        "followId": id
			    };
			    let success = (result) => {
			        if (result.error === "0") {
			            app.$toast("添加关注成功");
			            app.getContacts();
			            setTimeout(() => {
			                app.list = [];
			                app.searchUser();
			            }, 1000);
			        } else {
			            app.$toast(result.error);
			        }
			    }
			    console.log(data)
			    this.$store.dispatch(`user/${ADD_FOLLOW}`,{
			    	data,
			    	onSuccess:success
			    })
			},
			cancelFollow(id) {
			    //取消关注
			    let data = {
			        "followId": id,
			    };
			    let success = (result) => {
			        if (result.error == 0) {
			            this.$toast("取消关注成功");
			            this.getContacts();
			            setTimeout(() => {
			                this.list = [];
			                this.searchUser();
			            }, 1000);
			        } else {
			            this.$toast(result.error);
			        }
			    }
				this.$store.dispatch(`user/${CANCEL_FOLLOW}`,{
					data,
					onSuccess:success
				})
			},
			contract_test() {
			        let app = this;
			        //获取手机通讯录列表
			        let contactFileds = ["displayName", "name", "phoneNumbers", "emails", "address"];
			        //filter制定为空或不指定返回所有联系人列表
			        let options = {filter: "", multiple: true};
			        //navigator.contacts.find(contactFileds, onSuccess, onError, options);
			
			        function onSuccess(contacts) {
			            var str = '[';
			            for (var i = 0; i < contacts.length; i++) {
			                let obj = {};
			                obj['name'] = contacts[i]['displayName'];
			                obj['phoneNumber'] = contacts[i]['phoneNumbers'][0]['value'];
			
			                str += JSON.stringify(obj) + ',';
			            }
			            str = str.substr(0, str.length - 1);
			            str += ']';
			            app.updateContact(str);
			        }
			        function onError(err) {
			            console.log(err)
			        }
			    },
			    //同步手机通讯录到服务器,并加载到页面
			    updateContact(str) {
			        let app = this;
			        let data = {
			            'contractList': str
			        }
			        let success = (result) => {
			            if (result.error === "0") {
			                app.$toast("同步通讯录成功!");
			                app.getContacts();
			            } else {
			                app.$toast(result.error);
			            }
			        }
					console.log(data)
					this.$store.dispatch(`user/${ADD_CONTRACT}`,{
						data,
						onSuccess:success
					})
			    },
			    getContacts() {
			        let app = this;
			        let success = (result) => {
			            if (result.error === "0") {
			                app.contractList = result.data.list;
			            } else {
			                app.$toast(result.error);
			            }
			        };
					this.$store.dispatch(`user/${GET_CONTRACT}`,{
						data,
						onSuccess:success
					})
			    },
			}
		}
</script>

<style>
	
text {
	font-size: 16px;
	font-family: 'Microsoft YaHei','华文细黑', Tahoma, Arial, sans-serif;
	color: #555;
}

.words{
	padding: 0 0.5rem;
	display: flex;
}
.words text{
	margin: 0;
	color: #5e5b5b;
}
.words image{
	width: 1rem;
	height: 1rem;
	margin-top: 0.2rem;
}
.search_result{
	margin-top: 0.5rem;
}
.search_result uni-list-item{
	list-style-type:none;
	margin-top: 0.5rem;
}
.search_result image{
/* 	width: 2.8rem;
	height: 2.8rem; */
	width: 2.0rem;
	height: 2.0rem;
}


.search_result{

    margin-top: 0.5rem;

}
.search_result li{
    list-style-type:none;
    margin-top: 0.5rem;
}
.search_result li .person{
    display:flex ;
    background: #FFFFFF;
    padding:0.5rem;
}
.search_result li .person img{
    width: 2.8rem;
    height: 2.8rem;
}

.search_result li .person .info{
    flex: 3;
    margin-left: 1.2rem;
}
.search_result li .person .info p{
    margin: 0;
    margin-bottom: 0.5rem;
}
.search_result li .person .info span{
    font-size: 0.9rem;
    color: #828282;
    margin-top: 0.2rem;
}

/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */

/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

.example {
	padding: 0 15px 15px;
}

.example-info {
	padding: 15px;
	color: #3b4144;
	background: #ffffff;
}

.addfrieds {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
}

/* #endif */
.example {
	padding: 0 15px;
}

.example-info {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	color: #3b4144;
	background-color: #ffffff;
	font-size: 14px;
	line-height: 20px;
}

.example-info-text {
	font-size: 14px;
	line-height: 20px;
	color: #3b4144;
}


.addfrieds {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #FFFFFF;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007AFF;
}

.word-btn--hover {
	background-color: #4ca2ff;
}



.search-result {
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
}

.search-result-text {
	text-align: center;
	font-size: 14px;
}

.addfrieds {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 0px;
}
</style>
